// 个人中心-个人中心
import React from 'react'
import './base.scss'
import { StoreState } from '../../../store/index'
import { Avatar, Card, Divider } from 'antd'
import userPoster from '../../../assets/img/common/user-poster.png'
import { connect } from 'react-redux'
import { UserInfoProps } from '../../../store/reducers/user'
import { RouteComponentProps, withRouter } from 'react-router-dom'

type Props = {
  userInfo: UserInfoProps
} & RouteComponentProps
const { Meta } = Card

const BasePage: React.FC<Props> = function ({ userInfo }: Props) {
  const MetaDesc = (
    <div className="meta-desc">
      <div className="login-name">{userInfo.loginName}</div>
      <div>UID：{userInfo.uid}</div>
      <div>简介：{userInfo.bio}</div>
      <div>邮箱：{userInfo.email}</div>
      <div>地区：{userInfo.location}</div>
      <div>注册时间：{userInfo.createdAt}</div>
    </div>
  )

  return (
    <div className="profile-base">
      <Divider orientation="left" plain>
        个人中心
      </Divider>
      <Card
        style={{ width: 350 }}
        cover={<img className="poster" src={userPoster} alt="" />}
        hoverable
      >
        <Meta
          title={userInfo.username}
          avatar={<Avatar src={userInfo.avatarUrl} />}
          description={MetaDesc}
        ></Meta>
      </Card>
    </div>
  )
}

const mapStateToProps = ({ user }: StoreState) => {
  return { userInfo: user.userInfo }
}

export default connect(mapStateToProps)(withRouter(BasePage))
